<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta author="Yifu Zeng（曾逸夫）">
    <title>YOLOv5 RealTime TFJS v0.5</title>

    <link rel="stylesheet" href="/static/css/main.css">

    <link href="https://pic.imgdb.cn/item/6216cb832ab3f51d911e24b6.png" rel="shortcut icon">
    <!--  调用tfjs API -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.2.0/dist/tf.min.js"></script>
    <!-- 调用JQuery API -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <!-- 调用bootstrap API -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
        integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
</head>

<body>

    <div id="main-style">
        <div>
            <!-- 摄像头切换 -->
            <select id="video-all"></select>
            <button id="webcam-open">开启摄像头</button>
        </div>

        <!-- 此处根据设备类型，自定义显示窗口的尺寸 -->
        <div id="obj-show">
            <!-- 视频层 -->
            <div id="div-video">
                <video id="video-rt" autoPlay playsInline muted></video>
            </div>
        </div>
    </div>


    <!-- 调用 yolov5-rt-tfjs 主运行文件 -->
    <script src="/static/js/yolov5_rt_tfjs.js"></script>

</body>

</html>
